<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../jquery/jquery-1.8.3.js"></script>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				font-size: 12px;
			}
			
			#login {
				width: 384px;
				border: 1px solid #999;
			}
			
			#login .top {
				height: 70px;
				line-height: 70px;
				padding-left: 70px;
				width: 314px;
				background: #F4F4F4 url(images/login.gif) no-repeat 26px 16px;
				font-size: 14px;
				font-weight: bold;
			}
			
			#login .body {
				height: 160px;
				padding: 20px;
				width: 344px;
				border-top: 1px solid #999;
				border-bottom: 1px solid #999;
			}
			
			#login .body div {
				height: 50px;
				line-height: 50px;
			}
			
			#login .body lable {
				text-align: right;
				width: 60px;
				border: 1px solid red;
			}
			
			#login .body div.pt input {
				height: 30px;
				line-height: 30px;
				border: 1px solid #999;
				width: 190px;
			}
			
			#login .bt {
				height: 30px;
				line-height: 30px;
				text-align: center;
				background-color: #EDF1F3;
			}
			
			#login input.btn {
				width: 100px;
				height: 33px;
				line-height: 33px;
				text-align: center;
				color: #fff;
				border: none;
				font-weight: bold;
				background: url(images/bt.gif) no-repeat;
			}
			
			#login .body div.pt input.chooseInput {
				border: 1px solid blue;
			}
			
			input:focus{
				outline-style: none;
			}
		</style>
	</head>

	<body>
		<div id="login">
			<div class="top">
				登录通行证
			</div>
			<div class="body">
				<form>
					<div class="pt">
						<label>用户名：</label>
						<input type="text" class="" name="username" />
					</div>
					<div class="pt">
						<label>密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
						<input type="text" class="" name="username" />
						<a href="#">忘记密码？</a>
					</div>
					<div class="">
						<input type="submit" class="btn" value="登录" />
						<input type="button" class="btn" value="注册" />
					</div>
				</form>
			</div>
			<div class="bt">
				使用合作网站账号登陆
				<a href="#"> <img src="images/wb.gif" /></a>
				<a href="#"> <img src="images/qq.gif" /></a>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$("input[type=text]").bind({
			focus:function(){
				$(this).addClass("chooseInput");
			},
			blur:function(){
				$(this).removeClass("chooseInput");
			}
		})
	</script>
</html>